<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>山东营销风云榜</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../css/part/tabHead.css">
    <link rel="stylesheet" href="../../../css/part/mini.css">
    <link rel="stylesheet" href="../../../css/elementui.css">
</head>
<style>

    th {
        font-size: 13px;
    }

    td {
        font-size: 11px;
    }

    .el-input__inner {
        background-color: #b20306;
        color: white;
        border: 0px #b20306;
    }

</style>
<body>

<div id="app">
    <div id="tableHead">
        <img src="../../../img/part/realAct/branchMonth.png" id="branchHead" align="center">
        <a href="../../portal/navigationYX.html"><img src="../../../img/portal/min.png" id="miniImg"></a>
        <div style="margin-left: 74.2%;margin-top: -19.2%;position: absolute;width: 25%">
            <template>
                <el-select v-model="timeValue" placeholder="请选择" @change="changeMon">
                    <el-option
                            v-for="value in options"
                            :value="value">
                    </el-option>
                </el-select>
            </template>
        </div>
        <table width="100%">
            <tr >
                <th width="7%" rowspan="2">NO</th>
                <th width="13%" rowspan="2">机构</th>
                <th colspan="5">当月</th>
            </tr>
            <tr >
                <th width="16%">新增万元</th>
                <th width="16%">预收万元</th>
                <th width="16%">承保万元</th>
                <th width="16%">预收实动</th>
                <th width="16%">承保实动</th>
            </tr>
        </table>
    </div>
    <div id="midDiv"></div>
    <div class="tableBody">
        <table id="tab" width="100%">
            <tbody id="tbody">
            </tbody>
        </table>
    </div>
</div>
</body>
<script src="../../../js/vue.js"></script>
<script src="../../../js/axios.js"></script>
<script src="../../../js/head.js"></script>
<script src="../../../js/elementui.js"></script>
<script src="../../../js/jquery-3.2.1.min.js"></script>
<script src="../../../js/share.js"></script>

<script>
    window.onload = function () {
        new Vue({
            el: '#app',
            data() {
                return {
                    //中支名称
                    branchsName: '',
                    //万元新增
                    monAdd10000: 0,
                    //预收实动
                    branchMonAdvance5000: 0,
                    //预收万元
                    branchMonAdvance10000: 0,

                    branchMonInSure5000: 0,
                    branchMonInSure10000: 0,

                    pojo: {},
                    divHeight: 0,
                    options: [],
                    timeValue: 0,
                    nowDay: 1,
                    pathName:'getBranchThisMonthAct',

                }
            },
            created() {

                this.getSelTime();
                this.getBranchMonth();
            },
            methods: {

                getSelTime() {
                    var time = new Date();
                    var year = time.getFullYear();
                    var month = time.getMonth();
                    this.nowDay = time.getDate();
                    var nowTime = year + "-" + (month + 1);
                    this.options[0] = nowTime;
                    var nextTime = month == 11 ? ((year + 1) + "-1") : (year + "-" + (month + 2));
                    this.options[1] = nextTime;
                    this.timeValue = this.options[0];
                },
                changeMon() {

                    this.monAdd10000 = 0;
                    this.branchMonAdvance5000 = 0;
                    this.branchMonAdvance10000 = 0;
                    this.branchMonInSure5000 = 0;
                    this.branchMonInSure10000 =0;
                    $('#tbody>tr').remove();
                    if (this.timeValue === this.options[1]) {
                        this.pathName='getBranchNextMonthAct';
                        this.getBranchMonth();
                    } else {
                        this.pathName='getBranchThisMonthAct';
                        this.getBranchMonth();
                    }
                },

                //获取各中支的数据
                getBranchMonth() {
                    document.getElementById("midDiv").style.height = window.getComputedStyle(document.getElementById("tableHead")).getPropertyValue("height");
                    setTimeout(() => {
                        axios.get(`/realAct/${this.pathName==='getBranchNextMonthAct'?'getBranchNextMonthAct':'getBranchThisMonthAct'}`).then(response => {
                            this.pojo = response.data;
                            var str = "";//定义用于拼接的字符串
                            for (var i = 0; i < this.pojo.length; i++) {
                                this.monAdd10000 = this.monAdd10000 + this.pojo[i].monAdd10000;
                                this.branchMonAdvance5000 = this.branchMonAdvance5000 + this.pojo[i].branchMonAdvance5000;
                                this.branchMonAdvance10000 = this.branchMonAdvance10000 + this.pojo[i].branchMonAdvance10000;
                                this.branchMonInSure5000 = this.branchMonInSure5000 + this.pojo[i].branchMonInSure5000;
                                this.branchMonInSure10000 = this.branchMonInSure10000 + this.pojo[i].branchMonInSure10000;
                                str = "<tr><td width=\"7%\">" + (i + 1) + "</td>" +
                                    "<td width=\"13%\">" + this.pojo[i].branchsName + "</td>" +
                                    "<td width=\"16%\">" + this.pojo[i].monAdd10000 + "</td>" +
                                    "<td width=\"16%\">" + this.pojo[i].branchMonAdvance10000 + "</td>" +
                                    "<td width=\"16%\">" + this.pojo[i].branchMonInSure10000 + "</td>" +
                                    "<td width=\"16%\">" + this.pojo[i].branchMonAdvance5000 + "</td>" +
                                    "<td width=\"16%\">" + this.pojo[i].branchMonInSure5000 + "</td></tr>";
                                //追加到table中
                                $("#tbody").append(str);
                            }
                            str = "<tr><th colspan=\"2\" style=\"font-weight: bolder\">" + '合计:' + "</th>" +
                                "<th width=\"16%\">" + this.monAdd10000 + "</th>" +
                                "<th width=\"16%\">" + this.branchMonAdvance10000 + "</th>" +
                                "<th width=\"16%\">" + this.branchMonInSure10000 + "</th>" +
                                "<th width=\"16%\">" + this.branchMonAdvance5000 + "</th>" +
                                "<th width=\"16%\">" + this.branchMonInSure5000 + "</th></tr>";
                            $("#tbody").append(str);

                        })
                    }, 200)
                },

            }
        })
    }
</script>

</html>